<template>
  <div id="head">
    <el-container>
      <el-header class="header">
        <div id="view">
          <el-image style="width: 50px; height: 50px" :src="srcl" :fit="fit"></el-image>
        </div>
        <div id="search">
          <el-input placeholder="请输入内容" v-model="input" class="input-with-select" size="medium">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="电影名" value="1"></el-option>
              <el-option label="演员名" value="2"></el-option>
              <el-option label="导演名" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div id="iron">
          <div class="draw" @mouseover="mouseOver1" @mouseleave="mouseLeave1">
            <i class="el-icon-bell" ref="acp1"></i>
            <p style="font-size: 12px;margin: 0;" ref="acp2">消息</p>
          </div>
          <div class="draw" @mouseover="mouseOver2" @mouseleave="mouseLeave2">
            <i class="el-icon-time" ref="acp3"></i>
            <p style="font-size: 12px;margin: 0;" ref="acp4">回看</p>
          </div>
          <div class="draw" @mouseover="mouseOver3" @mouseleave="mouseLeave3">
            <i class="el-icon-star-off" ref="acp5"></i>
            <p style="font-size: 12px;margin: 0;" ref="acp6">收藏</p>
          </div>
          <div class="draw1">
            <el-dropdown>
                  <el-avatar :size="50" :src="circleUrl"></el-avatar>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main >
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1" @click="first">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">电影</template>
            <el-menu-item index="2-1" @click="cMovie(1)">国产电影</el-menu-item>
            <el-menu-item index="2-2" @click="cMovie(2)">欧美电影</el-menu-item>
            <el-menu-item index="2-3" @click="cMovie(3)">日韩电影</el-menu-item>
            <el-menu-item index="2-4" @click="cMovie(4)">港台电影</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">电视剧</template>
            <el-menu-item index="3-1" @click="cTv(1)">国产电视剧</el-menu-item>
            <el-menu-item index="3-2" @click="cTv(2)">欧美电视剧</el-menu-item>
            <el-menu-item index="3-3" @click="cTv(3)">日韩电视剧</el-menu-item>
            <el-menu-item index="3-4" @click="cTv(4)">港台电视剧</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">动漫</template>
            <el-menu-item index="4-1" @click="cAnime(1)">国产动漫</el-menu-item>
            <el-menu-item index="4-2" @click="cAnime(2)">日本动漫</el-menu-item>
            <el-menu-item index="4-3" @click="cAnime(3)">欧美动漫</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-main>
    </el-container>
  </div>
</template>

<style>
  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  #view {
    width: 30%;
    float: left;
  }

  #search {
    width: 40%;
    float: left;
    margin-top: 8px;
  }

  #iron {
    width: 15%;
    float: right;
  }

  .draw {
    width: 25px;
    height: 40px;
    font-size: 25px;
    float: left;
    margin-left: 10px;
  }

  .draw1 {
    float: left;
    margin-left: 10px;
  }
</style>
<script>
  export default {
    data() {
      return {
        input: '',
        select: '',
        circleUrl: '../static/12.jpg',
        srcl: '../static/12.jpg',
        fit: 'fill',
        activeIndex: '1',
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      first() {
        this.$router.push({
          path: '/'
        })
      },
      cMovie(a) {
        //this.$router.push("/cart")
        //传递的参数用{{ $route.query.goodsId }}获取
        this.$router.push({
          path: '/movieBody?goodsId=' + a
        });

      },
      cTv(a) {
        this.$router.push({
          path: '/tvBody?goodsId=' + a
        });

      },
      cAnime(a) {
        this.$router.push({
          path: '/animeBody?goodsId=' + a
        });

      },
      // 移入
      mouseOver1() {
        this.$refs.acp1.style.color = '#99A9BF';
        this.$refs.acp2.style.color = '#99A9BF';
      },
      // 移出
      mouseLeave1() {
        this.$refs.acp1.style.color = 'black';
        this.$refs.acp2.style.color = 'black';
      },
      // 移入
      mouseOver2() {
        this.$refs.acp3.style.color = '#99A9BF';
        this.$refs.acp4.style.color = '#99A9BF';
      },
      // 移出
      mouseLeave2() {
        this.$refs.acp3.style.color = 'black';
        this.$refs.acp4.style.color = 'black';
      },
      // 移入
      mouseOver3() {
        this.$refs.acp5.style.color = '#99A9BF';
        this.$refs.acp6.style.color = '#99A9BF';
      },
      // 移出
      mouseLeave3() {
        this.$refs.acp5.style.color = 'black';
        this.$refs.acp6.style.color = 'black';
      }

    },

  }
</script>
